import {StyleSheet, Text, TouchableOpacity, View} from 'M/UI/Libraries';
import React, {Fragment} from 'react';

import {globalService} from 'M/Services';

const links = [
  {
    id: 1,
    title: '全局弹起框',
    link: '',
    description: '下面弹起的框,事例。',
    event() {
      const upView = globalService.getUpView();
      upView.show(() => {
        return (
            <View>
              <Text style={[styles.title]}>Hello World</Text>
              <TouchableOpacity onPress={() => upView.close()}>
                <View style={[styles.buttonView]}>
                  <Text style={[styles.content, {color: '#FFFFFF'}]}>退出</Text>
                </View>
              </TouchableOpacity>
            </View>
        );
      }, true);
    },
  },
];
const MenuLinks = ({navigation}) => {
  function openPage(link) {
    navigation.navigate(link);
  }

  return (
      <View style={styles.container}>
        {links.map(({id, title, link, description, event}) => (
            <Fragment key={id}>
              <TouchableOpacity
                  accessibilityRole="button"
                  onPress={() => (event ? event() : openPage(link))}
                  style={styles.linkContainer}>
                <Text style={styles.link}>{title}</Text>
                <Text style={[styles.description]}>{description}</Text>
              </TouchableOpacity>
            </Fragment>
        ))}
      </View>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 24,
  },
  linkContainer: {
    flexWrap: 'wrap',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 8,
  },
  link: {
    flex: 2,
    fontSize: 18,
    fontWeight: '400',
    color: '#1292B4',
  },
  description: {
    flex: 3,
    paddingVertical: 8,
    fontWeight: '400',
    fontSize: 18,
  },
  title: {
    fontSize: 60,
  },
  content: {
    fontSize: 18,
  },
  buttonView: {
    alignItems: 'center',
    textAlign: 'center',
    paddingVertical: 10,
    marginTop: 20,
    marginBottom: 20,
    marginLeft: 100,
    marginRight: 100,
    backgroundColor: '#042b88',
  },
});

export default MenuLinks;
